<template>
  <el-dialog
    v-model="dialogVisible"
    :title="Tips"
    width="80%"
    top="5vh"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <div class="itemList">
      <div class="itemTop">
        <el-form :inline="true" :model="data" class="demo-form-inline">
          <el-form-item label="题库名称">
            <el-input v-model="params.key" placeholder="题库名称" />
          </el-form-item>
          <el-form-item label="题目类型">
            <el-select v-model="params.type" placeholder="请选择">
              <el-option label="单选题" value="shanghai" />
              <el-option label="多选题" value="beijing" />
              <el-option label="问答题" value="beijing" />
              <el-option label="判断题" value="beijing" />
              <el-option label="填空值" value="beijing" />
            </el-select>
          </el-form-item>
          <el-button
            type="primary"
            style="margin-top: -20px; margin-left: -22px;font-size:12px"
            >查询</el-button
          >
        </el-form>
      </div>
      <div class="buttomTab">
        <div class="tab">
          <el-table
            ref="multipleTableRef"
            :data="tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" />
            <el-table-column label="题目">
              <template #default="scope"
                ><p
                  v-html="scope.row.title"
                  @click="Paper(scope.row)"
                  style="color: #53a7ff"
                  class="title"
                ></p
              ></template>
            </el-table-column>
            <el-table-column property="type" width="100" label="题目类型" />
            <el-table-column property="scores" width="100" label="分数" />
          </el-table>
        </div>
        <div class="pagin">
          <el-pagination
            v-model:currentPage="params.page"
            v-model:page-size="params.psize"
            :page-sizes="[5, 10, 20, 50]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>

      <div class="bottom">已选{{ tableData.length }}道题</div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="(datas.isShow1 = false), (datas.isShow = false)"
           style="font-size:12px">取消</el-button
        >
        <el-button type="primary" @click="guan" style="font-size:12px">确定</el-button>
      </span>
    </template>
    <!-- 引入试卷弹框 -->
    <singlePaper></singlePaper>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, toRefs, watch, inject, provide } from "vue";
import singlePaper from "../../components/test/singlePaper.vue";
// 导入编码
import {htmlEncodeByRegExp} from '../../utils/HtmlUtil'
const data: any = reactive({
  dialogVisible: false,
  Tips: "",
  params: {
    key: "",
    type: "",
    page: 1,
    psize: 5,
    databaseid: 0,
  },
  tableData: [],
  arr: [],
  num: 0,
  isShow: false,
  subObj: {},
});
const { dialogVisible, isShow, subObj, Tips, params, tableData, num } =
  toRefs(data);
// 爷组件
const datas: any = inject("data");
provide("data", data);
watch([datas], () => {
  dialogVisible.value = datas.isShow1;
  data.tableData = datas.DataList;
  data.Tips = `${datas.Tips} 试卷列表`;
  
  // console.log(datas)
});
// 关闭
const handleClose = (done: () => void) => {
  done();
  datas.isShow = false;
  datas.isShow1 = false;
};
// 确定
const guan = () => {
  dialogVisible.value = false;
  datas.isShow = false;
  datas.isShow1 = false;
  datas.params.questions = data.arr.map((item:any)=>({...item,title:htmlEncodeByRegExp(item.title)}));
  console.log(data.arr);
  
};
// 全选
const handleSelectionChange = (val: any) => {
  val.map((item: any) => data.arr.push(item));
};
// 分页
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
// 获取试卷信息
const Paper = (row: any) => {
  isShow.value = true;
  data.subObj = row;
};
// 查询
</script>
<style scoped>
@import url("../../static/css/test/itemList.css");
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
